<template>
  <div class="page">
    <!-- 顶部搜索区：用 form 包裹，行内布局 -->
    <form class="search-bar" @submit.prevent="handleSearch">
      <!-- <a-input-search v-model="keyword" placeholder="请输入关键字" style="width: 320px" enter-button />
      <a-button type="primary" html-type="submit" style="margin-left: 8px;margin-right:8px">
        搜索
      </a-button> -->
      <a-button type="primary">
        新增
      </a-button>
    </form>

    <!-- 下部分：左侧树 + 右侧内容 -->
    <a-row class="bottom-box" type="flex">
      <!-- 左侧树（窄） -->
      <a-col class="left-pane">
        <a-directory-tree
          :tree-data="treeData"
          :replace-fields="replaceFields"
          @select="onTreeSelect"
          default-expand-all
        />
      </a-col>

      <!-- 右侧中心区域（宽） -->
      <a-col class="right-pane">
        <a-card title="模板详情" size="small">
          <a-list v-if="displayList.length" :data-source="displayList" item-layout="horizontal">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta :title="item.title" :description="item.description" />
            </a-list-item>
          </a-list>
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'TestCaseLibrary',
  data() {
    return {
      keyword: '',
      selectedKey: null,
      replaceFields: { children: 'children', title: 'title', key: 'key' },
      /* 三级树数据 */
      treeData: [
        {
          title: '测试用例模板库',
          key: 'root',
          children: [
            {
              title: '测试项A',
              key: 'item-login',
              children: [
                { key: 'tmpl-1', title: '测试项A1', description: '' },
                { key: 'tmpl-2', title: '测试项A2', description: '' }
              ]
            },
            {
              title: '测试项B',
              key: 'item-order',
              children: [
                { key: 'tmpl-3', title: '测试项B1', description: '' },
                { key: 'tmpl-4', title: '测试项B2', description: '' }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    /* 右侧展示列表：搜索优先，树选中其次 */
    displayList() {
      const list = this.flattenTemplates(this.treeData)
      if (this.keyword) {
        const kw = this.keyword.toLowerCase()
        return list.filter(t => t.title.toLowerCase().includes(kw) || t.description.toLowerCase().includes(kw))
      }
      if (this.selectedKey) {
        const node = this.findNode(this.treeData, this.selectedKey)
        if (!node) return []
        return node.children ? this.flattenTemplates(node.children) : [node]
      }
      return []
    }
  },
  methods: {
    /* 搜索触发 */
    handleSearch() {
      this.selectedKey = null
    },
    /* 树选择 */
    onTreeSelect(keys) {
      this.keyword = ''
      this.selectedKey = keys[0] || null
    },
    /* 工具：拍平所有模板节点 */
    flattenTemplates(nodes) {
      let res = []
      nodes.forEach(n => {
        if (!n.children) res.push(n)
        else res = res.concat(this.flattenTemplates(n.children))
      })
      return res
    },
    /* 工具：根据 key 查找任意节点 */
    findNode(nodes, key) {
      for (const n of nodes) {
        if (n.key === key) return n
        if (n.children) {
          const found = this.findNode(n.children, key)
          if (found) return found
        }
      }
      return null
    }
  }
}
</script>

<style scoped>
/* 整页高度撑满 */
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部搜索栏：form 行内布局 */
.search-bar {
  flex-shrink: 0;
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

/* 下部分：左右分栏，占剩余高度 */
.bottom-box {
  flex: 1;
  overflow: hidden;
}

/* 左侧树：窄 */
.left-pane {
  width: 260px;
  border-right: 1px solid #eee;
  overflow-y: auto;
  padding: 12px;
}

/* 右侧中心区域：宽 */
.right-pane {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px;
}
</style>
